現在，我們的應用程式看起來像一個準備就緒的機器人，有大腦有身體，但大腦和身體之間的「神經系統」還沒有接上。大腦（JS）還不知道如何指揮身體（HTML）的各個部位，例如，它不知道「掃描按鈕」在哪裡，也不知道「狀態文字區」在哪裡。

今天，我們的任務就是建立這個神經系統。我們將學習一個至關重要的概念——DOM (Document Object Model)。DOM 就像是瀏覽器在讀取了你的 HTML 骨架藍圖後，在記憶體中建立的一個可以互動的、活生生的網頁模型。

我們將學會如何從我們的 JavaScript 大腦中，伸出精準的「觸手」，去抓住 HTML 身體上的特定部位（例如那個 ID 為 scanButton 的按鈕），並把它們儲存在變數中，為下一步的互動做好萬全準備。

1. 什麼是 DOM？(一份「活」的建築藍圖)

DOM (Document Object Model，文件物件模型)，這個名字聽起來很嚇人，但概念其實很簡單。

想像一下：

• 你的 index.html 檔案，是一張靜態的建築設計藍圖。它只是紙上的規劃。

• 當瀏覽器讀取這張藍圖時，它會在自己的記憶體中，按照藍圖的規劃，蓋出一棟真實、立體、可以互動的建築模型。

這個活的、可以互動的建築模型，就是 DOM。

最關鍵的一點：我們的 JavaScript 程式碼，不是去修改那張靜態的 index.html 藍圖檔案。相反，JS 是直接去操作這棟活的 DOM 模型。比如，JS 可以對模型中的某個房間（某個 <div>）重新粉刷（改變顏色），或者在裡面新增一盞燈（新增一個元素）。瀏覽器會即時將你在模型上做的任何改變，同步更新到使用者看到的網頁畫面上。

document 物件：DOM 的總控制器

在 JavaScript 中，有一個內建的、超級重要的全域物件叫做 document。它就代表了整個 DOM 模型，是我們所有 DOM 操作的起點。你可以把它想像成這棟建築的「總控制器」或「中控室」。

2. 選取元素的「神兵利器」

要操作 DOM，第一步就是要先「選到」你想操作的那個 HTML 元素。document 物件給了我們幾種好用的工具。

A. getElementById() - 最精準的ID卡識別器

這是最常用、最快速、也最可靠的方法。因為 HTML 元素的 id 在整個頁面中是獨一無二的，就像每個人的身分證號碼一樣。

• 語法：document.getElementById('你的元素ID');

• 功能：傳入一個 ID 字串，它會回傳對應的那一個 HTML 元素物件。如果找不到，則回傳 null。

// 在 JS 中，選取我們 HTML 裡 ID 為 "scanButton" 的按鈕
const scanButtonElement = document.getElementById('scanButton');

// 選取 ID 為 "statusText" 的 span 標籤
const statusTextElement = document.getElementById('statusText');

B. querySelector() - 更靈活的 CSS 選擇器

這是一個更現代、更強大的方法。它允許你使用任何你在 CSS 中學過的選擇器語法來尋找元素。

• 語法：document.querySelector('你的CSS選擇器');

• 功能：回傳第一個符合條件的元素。

// 透過 ID 選擇 (ID 前面要加 #)
const scanButton = document.querySelector('#scanButton');

// 透過標籤名稱選擇 (會選到頁面上第一個 h1)
const mainTitle = document.querySelector('h1');

// 透過 class 選擇 (class 前面要加 .) - 假設我們有 <p class="info">
// const infoText = document.querySelector('.info');

建議：在我們的專案中，核心的 UI 區塊都有獨一無二的 id。因此，優先使用 getElementById() 是最清晰、最不容易出錯的選擇！

3. 實際動手：在 app.js 中建立神經連結

理論講完了，現在就來實際操作。打開你專案中的 app.js 檔案（如果裡面有 console.log 之類的測試碼，可以先清空），然後把下面的程式碼完整地貼進去。

app.js

// --- [1] 選取核心 DOM 元素 ---
// 我們的 JavaScript 程式碼將會頻繁地操作這些元素，
// 所以我們在程式一開始就先選取它們，並用變數儲存起來，
// 這樣就不用每次要用的時候都重新找一次，可以提高效率。

// 透過 ID 'scanButton' 找到掃描按鈕
const scanButton = document.getElementById('scanButton');

// 透過 ID 'statusText' 找到狀態顯示文字的 span 標籤
const statusText = document.getElementById('statusText');

// 透過 ID 'gattContainer' 找到未來要放置 GATT 資訊的容器 div
const gattContainer = document.getElementById('gattContainer');


// --- [2] 驗證選取結果 ---
// 為了確保我們的確成功選到了這些元素，
// 我們可以用 console.log 把它們印出來看看。
// 這是一個非常重要的偵錯習慣！

console.log('掃描按鈕:', scanButton);
console.log('狀態文字區:', statusText);
console.log('GATT 容器:', gattContainer);

驗證成果

1. 儲存你的 app.js 和 index.html 檔案。

2. 在瀏覽器中打開 index.html。

3. 按下 F12 打開「開發者工具」，並切換到「Console (主控台)」分頁。

你應該會看到類似下面的輸出：

掃描按鈕: <button id="scanButton">掃描藍牙裝置</button>
狀態文字區: <span id="statusText">未連線</span>
GATT 容器: <div id="gattContainer">...</div>

如果你看到了這些，恭喜你！ 這證明你的 JavaScript「大腦」已經成功地透過 DOM 這個「神經系統」，精準地識別並連接上了 HTML「身體」的三個核心部位！

總結與後續

今天我們邁出了 JS 與網頁互動的第一步，也是最關鍵的一步。
現在，我們的「大腦」已經成功接上了「身體」的控制線路。但是，光接上線還不夠，我們還沒有下達任何指令。使用者點擊按鈕時，程式依然沒有任何反應。
明天，我們將學習如何監聽「事件 (Events)」。我們會為「掃描按TP鈕」安裝一個「耳朵」，讓它能夠聽到使用者的「點擊」動作，並在聽到點擊聲後，立刻觸發我們指定的 JavaScript 函式。

那麼今天的內容就到這邊，感謝你能看到這裡，在這邊祝你早安、午安、晚安，我們明天見。